<template>
    <div :style="{width:props.width}" class="select-list">
        <el-select v-model="data.form.industryCode1" @change="chooseDomainLevel1" style="margin-right: 10px" class="select">
        <!-- <el-option label="未选择" value=""></el-option> -->
        <el-option :label="industry1.keyName" :value="industry1.keyId" v-for="industry1 in data.industrySelectListLevel1" :key="industry1.keyName" />
        </el-select>
        <el-select v-model="data.form.industryCode2" @change="chooseDomainLevel2" style="margin-right: 10px" class="select">
        <el-option :label="industry2.keyName" :value="industry2.keyId" v-for="industry2 in data.industrySelectListLevel2" :key="industry2.keyName" />
        </el-select>
        <el-select v-model="data.form.industryCode3" @change="chooseDomainLevel3" class="select">
        <el-option :label="industry3.keyName" :value="industry3.keyId" v-for="industry3 in data.industrySelectListLevel3" :key="industry3.keyName" />
        </el-select>
    </div>
</template>

<script setup>
import { reactive ,defineEmits ,watch} from 'vue'

import { getDomainApi } from '@/api/public/publicDict.js'


const props = defineProps({
    width:{
        type:String,
        default:'440px'
    },
    backInfo:{
        type:Object,
        default:()=> null
    }
})

const data = reactive({
    form:{
        industryCode1: '',
        industryCode2: '',
        industryCode3: '',
        industryName1: '',
        industryName2: '',
        industryName3: '',
    },
    industrySelectListLevel1: [],
    industrySelectListLevel2: [],
    industrySelectListLevel3: [],
})


const emit = defineEmits(['changeIndustry'])




//获取一级领域
const getDomainLevel1 = async () => {
  await getDomainApi({ parentId: 0 }).then((res) => {
    if (res.status === 200) {
      data.industrySelectListLevel1 = res.data
    }
  })
}
//获取二级领域
const getDomainLevel2 = async (code) => {
  await getDomainApi({ parentId: code }).then((res) => {
    if (res.status === 200) {
        data.industrySelectListLevel2 = res.data
    }
  })
}
//获取三级领域
const getDomainLevel3 = async(code) => {
  await getDomainApi({ parentId: code }).then((res) => {
    if (res.status === 200) {
      data.industrySelectListLevel3 = res.data
    }
  })
}



//选择一级领域
const chooseDomainLevel1 = async() => {
  await getDomainLevel2(data.form.industryCode1)
  data.form.industryCode2 = data.industrySelectListLevel2[0].keyId
  await getDomainLevel3(data.form.industryCode2)
  data.form.industryCode3 = data.industrySelectListLevel3[0].keyId
  chooseDomainLevel3()
}
//选择二级领域
const chooseDomainLevel2 = async() => {
  await getDomainLevel3(data.form.industryCode2)
  data.form.industryCode3 = data.industrySelectListLevel3[0].keyId
  chooseDomainLevel3()
}
//选择三级领域
const chooseDomainLevel3 = () => {
  let form = {
        industryCode1: data.form.industryCode1,
        industryCode2: data.form.industryCode2,
        industryCode3: data.form.industryCode3,
        industryName1: data.industrySelectListLevel1.find(v=> v.keyId ==data.form.industryCode1).keyName,
        industryName2: data.industrySelectListLevel2.find(v=> v.keyId ==data.form.industryCode2).keyName,
        industryName3: data.industrySelectListLevel3.find(v=> v.keyId ==data.form.industryCode3).keyName,
    }
    emit('changeIndustry',form)
}




//初始化
const initDomain=async ()=>{
  await getDomainLevel1()
  data.form.industryCode1 = data.industrySelectListLevel1[0].keyId
  await getDomainLevel2(data.form.industryCode1)
  data.form.industryCode2 = data.industrySelectListLevel2[0].keyId
  await getDomainLevel3(data.form.industryCode2)
  data.form.industryCode3 = data.industrySelectListLevel3[0].keyId
  chooseDomainLevel3()
}


const setDomain=async()=>{
  if(props.backInfo){
    await getDomainLevel1()
    data.form.industryCode1 = +props.backInfo.industryCode1
    await getDomainLevel2(data.form.industryCode1)
    data.form.industryCode2 = +props.backInfo.industryCode2
    await getDomainLevel3(data.form.industryCode2)
    data.form.industryCode3 = +props.backInfo.industryCode3
  }else{
    initDomain()
  }
}
setDomain()

watch(props.backInfo,(n,o)=>{
  setDomain()
})
</script>

<style lang="scss" scoped>
.el-select-dropdown__list {
  .el-select-dropdown__item {
    font-size: 12px;
  }
}
.select-list{
display: flex;
}
.select{
  flex: 1;
}
</style>